<template>
  <swiper :options="swiperOption" ref="mySwiper" >
    <!-- slides -->
    <swiper-slide v-for="banner in banners" :key="banner.id"><img :src="banner.url"></swiper-slide>
    <!--<swiper-slide><img src="http://192.168.1.155:90/20180329/image/QQ图片20171023163210.png"></swiper-slide>
    <swiper-slide><img src="http://192.168.1.155:90/20180329/image/QQ图片20171023163210.png"></swiper-slide>-->

        <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <!--<div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>-->
    <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
  </swiper>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'carrousel',
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
          autoPlay: true,
          loop:true,
          pagination : {
            el:'.swiper-pagination',
            type: 'fraction'
          }
        }
      }
    },
    props:['banners'],
    mounted: function () {
      //this.swiper.slideTo(3, 1000, false)
      /*var swiper = new Swiper('.swiper-container', {

         pagination: {
           el: '.swiper-pagination',
          /!* type: 'bullets',*!/
           clickable: true,
           renderBullet: function (index, className) {
             return '<span class="' + className + '">' + (index + 1) + '</span>';
           },
        }
      })*/
    },
    created:function (){

    }
  }
</script>

<style type="text/scss" lang="scss">
  @import "../../style/swiper-4.3.5.min.css";
  html{background: #f5f4f9;}
  .swiper-slide img{width: 100%;}
</style>
